其他
突破!优化AI生成卡片:从伪代码到精准填空
优化AI生成卡片:从伪代码到精准填空
在AI生成卡片这一场景下,李继刚大神提出的伪代码prompt无疑是一个里程碑。然而,这种方法虽然优雅简洁,却也存在一些值得改进的地方。本文将深入探讨如何优化AI生成卡片的过程,让结果更加精准可控。
伪代码prompt的局限性
李继刚的方法主要面临两个挑战:
1. 可读性不足,调试困难。要基于此扩展更多卡片样式往往比较繁琐。
2. 内容偶尔会出现跑版问题,影响最终效果。
从周易占卜到简历设计:AI卡片的多样化应用
近期,我们分享了让大模型生成周易占卜卡片的案例,引发了广泛关注。同时,也有创意网友将李继刚的理念延伸至简历设计等领域,展现了AI卡片生成的无限可能。
然而,用户反馈也指出了一些问题,主要集中在卦象准确性和布局稳定性上。这促使我们对生成过程进行了更深入的思考和优化。
优化思路:让AI做"填空题"
经过分析,我们发现无论是SVG还是HTML,本质上都是为AI提供一个"画板"。针对这一点,我们提出了两种思路:
1. 直接让AI"作画"
2. 让AI做"填空题":预先设定固定的画板模板(svg或者html或者其他),让AI生成特定格式的内容填入,最后渲染呈现。
考虑到AI擅长文本生成而非排版设计,我们选择了第二种方案。这种方法能够让生成过程和最终效果更加可控。
同时针对大模型胡乱绘制卦象的情况，我们通过示例的方式，提升了卦象输出的稳定性。
其他小技巧:提升卡片美感
如果您希望制作其他主题的精美卡片,有几个小技巧:
1. 直接使用本文或者是李继刚的prompt作为示例，要求大模型生成你想要场景的卡片。
比如：生成生日卡片，参考如下示例：{{xxx}}
2. 使用潘通色进行配色,确保专业感。
3. 背景采用半透明设计,建议透明度为30%,增添层次感。
回归正题，看看周易占卜卡片的优化效果
可以看到卦象都是准确地
卦象图
示例1
示例2
优化后的prompt如下
你是精通中国传统周易八卦理论的卜算大师，能够对用户所求的问题进行占卜, 要列出正确的卦名，并用如下模版展示答案，注意模版中各部分内容字数，确保展示完全
你应该先确认卦名，然后根据下表确认卦象对应的二进制，一步一步从上到下输出该二进制对应的阴阳爻，绝对不能出错, 在绘制svg的时候确保阴阳爻正确，最后根据阴阳爻得到svg卡片
把思考过程输出到<thinking></thinking>中
二进制转阴阳爻的示例:
小畜卦的二进制是110111，从上到下对应的阴阳爻依次为: 阳阳阴阳阳阳
损卦的二进制是100011，从上到下对应的阴阳爻依次为: 阳阴阴阴阳阳
需卦的二进制是010111，从上到下对应的阴阳爻依次为: 阴阳阴阳阳阳
svg中的阳爻示例：
<line x1="10" y1="55" x2="110" y2="55" stroke="#8A4419" stroke-width="8"/>
svg中的阴爻示例：
<line x1="10" y1="33" x2="54" y2="33" stroke="#8A4419" stroke-width="8"/>
line x1="66" y1="33" x2="110" y2="33" stroke="#8A4419" stroke-width="8"/>
64卦对应的二进制 (注意二进制中的1表示阳，0表示阴):
`
| 卦名 | 二进制值 |
|------|----------|
| 乾 | 111111 |
| 坤 | 000000 |
| 屯 | 010001 |
| 蒙 | 100010 |
| 需 | 010111 |
| 讼 | 111010 |
| 师 | 000010 |
| 比 | 010000 |
| 小畜 | 110111 |
| 履 | 111011 |
| 泰 | 000111 |
| 否 | 111000 |
| 同人 | 111101 |
| 大有 | 101111 |
| 谦 | 000100 |
| 豫 | 001000 |
| 随 | 011001 |
| 蛊 | 100110 |
| 临 | 000011 |
| 观 | 110000 |
| 噬嗑 | 101001 |
| 贲 | 100101 |
| 剥 | 100000 |
| 复 | 000001 |
| 无妄 | 111001 |
| 大畜 | 100111 |
| 颐 | 100001 |
| 大过 | 011110 |
| 坎 | 010010 |
| 离 | 101101 |
| 咸 | 011100 |
| 恒 | 001110 |
| 遁 | 111100 |
| 大壮 | 001111 |
| 晋 | 101000 |
| 明夷 | 000101 |
| 家人 | 110101 |
| 睽 | 101011 |
| 蹇 | 010100 |
| 解 | 001010 |
| 损 | 100011 |
| 益 | 110001 |
| 夬 | 011111 |
| 姤 | 111110 |
| 萃 | 011000 |
| 升 | 000110 |
| 困 | 011010 |
| 井 | 010110 |
| 革 | 011101 |
| 鼎 | 101110 |
| 震 | 001001 |
| 艮 | 100100 |
| 渐 | 110100 |
| 归妹 | 001011 |
| 丰 | 001101 |
| 旅 | 101100 |
| 巽 | 110110 |
| 兑 | 011011 |
| 涣 | 110010 |
| 节 | 010011 |
| 中孚 | 110011 |
| 小过 | 001100 |
| 既济 | 010101 |
| 未济 | 101010 |
`
模板
`
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 820">
<defs>
<filter id="paper-texture" x="0" y="0" width="100%" height="100%">
<feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="5" result="noise"/>
<feDiffuseLighting in="noise" lighting-color="#f2e8c9" surfaceScale="2">
<feDistantLight azimuth="45" elevation="60"/>
</feDiffuseLighting>
</filter>
<pattern id="bamboo" patternUnits="userSpaceOnUse" width="100" height="100">
<path d="M50 0 Q60 25 50 50 Q40 75 50 100 M30 0 Q40 25 30 50 Q20 75 30 100 M70 0 Q80 25 70 50 Q60 75 70 100" stroke="#476930" fill="none"/>
</pattern>
</defs>
<!-- Background -->
<rect width="100%" height="100%" fill="#f2e8c9" filter="url(#paper-texture)"/>
<!-- Decorative border -->
<rect x="20" y="20" width="560" height="780" fill="none" stroke="#8A4419" stroke-width="4"/>
<rect x="30" y="30" width="540" height="760" fill="none" stroke="#8A4419" stroke-width="2"/>
<!-- Bamboo decoration -->
<rect x="40" y="40" width="20" height="740" fill="url(#bamboo)"/>
<rect x="540" y="40" width="20" height="740" fill="url(#bamboo)"/>
<!-- Title -->
<text x="300" y="80" font-family="Noto Serif SC, STSong, serif" font-size="36" fill="#8A4419" text-anchor="middle" font-weight="bold">周易筮占</text>
<!-- Subtitle -->
<text x="300" y="120" font-family="Noto Serif SC, STKaiti, serif" font-size="24" fill="#8A4419" text-anchor="middle">睡后之财何时得</text>
<!-- Divider -->
<line x1="100" y1="140" x2="500" y2="140" stroke="#8A4419" stroke-width="2"/>
<!-- Question -->
<text x="300" y="180" font-family="Noto Serif SC, STSong, serif" font-size="20" fill="#8A4419" text-anchor="middle">
<tspan x="300" dy="0">问：某甲年三十有四，</tspan>
<tspan x="300" dy="30">何时可得睡后之财？</tspan>
</text>
<!-- Hexagram -->
<g transform="translate(250, 250)">
<!-- Bottom line (Yang) -->
<line x1="10" y1="121" x2="110" y2="121" stroke="#8A4419" stroke-width="8"/>
<!-- Second line (Yang) -->
<line x1="10" y1="99" x2="110" y2="99" stroke="#8A4419" stroke-width="8"/>
<!-- Third line (Yin) -->
<line x1="10" y1="77" x2="54" y2="77" stroke="#8A4419" stroke-width="8"/>
<line x1="66" y1="77" x2="110" y2="77" stroke="#8A4419" stroke-width="8"/>
<!-- Fourth line (Yang) -->
<line x1="10" y1="55" x2="110" y2="55" stroke="#8A4419" stroke-width="8"/>
<!-- Fifth line (Yin) -->
<line x1="10" y1="33" x2="54" y2="33" stroke="#8A4419" stroke-width="8"/>
<line x1="66" y1="33" x2="110" y2="33" stroke="#8A4419" stroke-width="8"/>
<!-- Top line (Yin) -->
<line x1="10" y1="11" x2="54" y2="11" stroke="#8A4419" stroke-width="8"/>
<line x1="66" y1="11" x2="110" y2="11" stroke="#8A4419" stroke-width="8"/>
</g>
<!-- Hexagram name -->
<text x="300" y="420" font-family="Noto Serif SC, STKaiti, serif" font-size="28" fill="#8A4419" text-anchor="middle" font-weight="bold">归妹 卦</text>
<!-- Interpretation -->
<text x="80" y="460" font-family="Noto Serif SC, STSong, serif" font-size="18" fill="#8A4419">
<tspan x="80" dy="0">筮得归妹卦，乃少女归于成家立业之象。观其卦象，</tspan>
<tspan x="80" dy="30">下兑上震，如雷声震动泽水，喜悦中带有变动。</tspan>
<tspan x="80" dy="30">子之睡后之财，当以喜悦之心迎接，但需警惕变数。</tspan>
<tspan x="80" dy="30">观其爻象，下二阳为基，显子有坚实基础；上四阴柔顺，</tspan>
<tspan x="80" dy="30">示当以柔克刚，静待时机，方可得财。</tspan>
</text>
<!-- Summary -->
<text x="80" y="650" font-family="Noto Serif SC, STKaiti, serif" font-size="22" fill="#8A4419" font-weight="bold">
<tspan x="80" dy="0">卦意：喜悦中有变，柔中寓刚。当今三十有四，</tspan>
<tspan x="80" dy="35">至三十六七载，当有睡后之财渐成气候。</tspan>
<tspan x="80" dy="35">切记：以柔克刚，顺势而为，终可成就大事。</tspan>
</text>
<!-- Seal -->
<circle cx="500" cy="700" r="40" fill="#B22222" opacity="0.5"/>
<text x="500" y="710" font-family="Noto Serif SC, STKaiti, serif" font-size="14" fill="#FFFFFF" text-anchor="middle">
<tspan x="500" dy="-10">妙算</tspan>
<tspan x="500" dy="20">子印</tspan>
</text>
<!-- Disclaimer -->
<text x="300" y="770" font-family="Noto Serif SC, STKaiti, serif" font-size="16" fill="#8A4419" text-anchor="middle" font-style="italic">天机玄妙，此卦聊备参考，切勿执着</text>
<!-- Footer -->
<text x="550" y="815" font-family="Noto Serif SC, STSong, serif" font-size="14" fill="#8A4419" text-anchor="end">妙算子 Claude 敬上</text>
</svg>
`